<template>
  <div class="user_profile">
    <van-nav-bar
      class="page-nav-bar"
      title="用户资料"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 上传文件 -->
    <input type="file" hidden ref="file" @change="onFileChange" />
    <van-cell title="头像" is_link value="内容" @click="$refs.file.click()">
      <van-image
        class="avatar"
        fit="cover"
        round
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
    </van-cell>
    <van-cell
      title="昵称"
      is_link
      :value="user.name"
      @click="NikeNameShow = true"
    ></van-cell>
    <van-cell
      title="性别"
      is_link
      :value="(user.gender = 0 ? '男' : '女')"
      @click="genderShow = true"
    ></van-cell>
    <van-cell title="生日" is_link :value="user.birthday"></van-cell>
    <!-- 修改昵称弹出层 -->
    <van-popup v-model="NikeNameShow" position="bottom" style="height: 100%">
      <!-- 修改昵称组件 -->
      <update-name @close="NikeNameShow = false" v-model="user.name" />
    </van-popup>
    <!-- 修改性别弹出层 -->
    <van-popup v-model="genderShow" position="bottom" style="height: 100%">
      <!-- 修改性别组件 -->
      <update-gender @close="genderShow = false" v-model="user.gender" />
    </van-popup>
    <!-- <img :src="imgSrc" /> -->
    <!-- 图片预览 -->
    <van-popup v-model="photoShow" position="bottom" style="height: 100%">
      <!-- 图片预览 组件 -->
      <update-photo @close="photoShow = false" :img="imgSrc" />
    </van-popup>
  </div>
</template>

<script>
import { getUserProfile } from '@/api/user'
import UpdateName from './components/update-name.vue'
import UpdateGender from './components/update-gender.vue'
import UpdatePhoto from './components/update-photo.vue'
export default {
  name: 'UserProfile',
  components: {
    UpdateName,
    UpdateGender,
    UpdatePhoto
  },
  data () {
    return {
      user: [],
      NikeNameShow: false,
      genderShow: false,
      photoShow: false,
      imgSrc: ''
    }
  },
  created () {
    this.loadProfile()
  },
  methods: {
    async loadProfile () {
      const { data } = await getUserProfile()
      this.user = data.data
    },
    // 上传图片
    onFileChange () {
      this.photoShow = true
      const file = this.$refs.file.files[0]
      // 读取blob对象(二进制)
      this.imgSrc = window.URL.createObjectURL(file)
      // 清空图片数据 (因为如果选择的是同一张图片 不会触发change事件 )
      this.$refs.file.value = ''
    }
  }
}
</script>

<style lang="less" scoped>
.avatar {
  width: 60px;
  height: 60px;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
.van-popup {
    background-color: #f5f7f9;
  }.update-wrap{
    padding: 20px;
}

</style>
